<template>
  <div>
    <Card class="mb-10">
      <Row>
        <Col span="12">
          <h3>订单管理</h3>
        </Col>
        <Col span="12" class="text-right">
          <Button type="primary" class="mr-10" @click="dialogFormVisible = true"
            >新建</Button
          >
          <Button type="error">删除</Button>
        </Col>
      </Row>
    </Card>
    <Card>
      <Row style="margin-bottom: 10px">
        <span>关键字：</span>
        <Input
          placeholder="请输入名称"
          v-model.trim="searchText"
          style="width: 200px; margin-right: 20px"
        ></Input>
        <Button type="primary">搜索</Button>
      </Row>
      <!-- <Table size="large" stripe ref="selection" :columns="tableCol" :data="tableData">
      </Table> -->
      <div>
        <el-table :data="tableData" stripe border style="width: 100%">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="date" label="下单日期" width="180"> </el-table-column>
          <el-table-column prop="date" label="收货人" width="180"> </el-table-column>
          <el-table-column prop="name" label="订单名称" width="180"> </el-table-column>
          <el-table-column prop="address" label="收货地址"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" @click="dialogVisible = true">编辑</el-button>
              <!-- <el-button type="primary" @click="dialogVisible = true">详情</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div style="text-align: right; padding: 5px 10px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </Card>
    <!-- //编辑 -->
    <el-dialog title="编辑订单信息" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="收货人">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="订单名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-input v-model="form.dddata"></el-input>
          </el-form-item>
          <el-form-item label="收货地址">
            <el-input v-model="form.ddaddress"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新建 -->
    <el-dialog title="添加订单" width="30%" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="收货人">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="订单名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="form.ddaddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-input v-model="form.dddata" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderlist: {},
      query: "",
      pagenum: 1,
      pagesize: 5,
      searchText: "",
      currentPage4: 4,
      dialogVisible: false,
      dialogFormVisible: false,
      value1: "",
      form: {
        name: "",
        ddaddress: "",
        dddata: "",
      },
    };
  },
  methods: {
    //获取订单列表
    getOrderList() {
      this.axios.post("/order/list_by_limit").then(res=>{
        console.log(res);
      });
    },
    //添加
    addItem() {},
    //删除
    myDelete() {},
    //修改
    ddedit() {},
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  mounted() {},
};
</script>
<style></style>
